I'm learning AJAX following the tutorials at https://www.w3schools.com/xml/ajax_intro.asp. I have succeffully completed a couple of GET requests, I'm now attempting a POST request.

My form:

<input class="form-control" type="email" id="log_email" required name="log_email">
<input class="form-control" type="password" id="log_password" required name="log_password">
<a class="btn" onclick="login(this)" >Log in</a>

My Ajax:

      <script type="text/javascript">
         function login(this_record) {
            var xhttp = new XMLHttpRequest();
            var UsrEml = $('#log_email').val();
            var UsrPw = $("#log_password").val();
            var AjaxURL = ("ajax_login.php") ;
            var AjaxPost = ("eml=" + UsrEml + "&pw=" + UsrPw);
            xhttp.onreadystatechange = function() {
             if (this.readyState == 4 && this.status == 200) {
              document.getElementById("accountstuff").innerHTML = this.responseText;
             }
           };
           xhttp.open("POST", AjaxURL, true);
           xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
           xhttp.send(AjaxPost);
         }        
      </script>

My PHP:

<?php
echo ($_POST["eml"]) ;
?>

The result is: Array ( [eml] => test@user.com [pw] => Password1 )

I was expecting: test@user.com

Why am I getting an array for a $_POST variable?